<template>
	<view scroll-with-animation scroll-y style="height: 100%;position: relative;background-color: #F6FAFA;padding-top:20rpx;">
		<view style="display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;padding-left: 21rpx;padding-right: 21rpx;box-sizing: border-box;">
			<view v-for="(deptItem,deptIdx) in deptList" :key="deptIdx" 
				style="width: 32%;height: 130rpx;background: linear-gradient(0deg, #EBF8F7, #FFFFFF);
					border: 2rpx solid #E6F9F8;border-radius: 16rpx;margin-bottom: 20rpx;
					display: flex;align-items: center;justify-content: center;flex-direction: column;" @tap="toDoctorlistByDept(deptItem)">
				<image :src="deptItem.imgurl" style="height:40%;margin-bottom: 10rpx;" mode="heightFix"></image>
				<view style="font-size: 30rpx;color: #424C4C;">{{deptItem.name}}</view>
			</view>
			<view style="width: 32%;height: 130rpx;background-color: rgba(255, 255, 255, 0.0);" v-if=" deptList.length % 3 != 0 ">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deptList:[]
			};
		},
		onLoad() {
			let _this = this;
			this.getDeptList();
		},
		methods: {
			toDoctorlistByDept(val){
				uni.navigateTo({
					url: '/pages4/doctorlist/index?deptId='+val.id+'&deptName='+val.name
				});
			},
			getDeptList() {
						this.func.$request('wx/getHspDeptList.tz',{hspId: this.hspId},'GET').then(res=>{
							if (res.data.success = true) {
								let deptList = res.data.result
								if(deptList && deptList.length>0){
									this.deptList = deptList
								}
							}
						})
					}
				}
			};
</script>

<style lang="less">
	.list>view {
		padding: 40rpx 0;
		border-top: 1rpx solid #efefef;
	
		.doctor {
			color: #74a6fd;
	
			.doctorv {
				width: 150rpx;
	
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
	
	.list .head {
		height: 140rpx;
	
		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
		}
	
		.texts {
			height: 32rpx;
			bottom: -4rpx;
	
			text {
				display: inline-block;
				height: 32rpx;
				line-height: 32rpx;
				border-radius: 16rpx;
				background: #74a6fd;
				font-size: 22rpx;
				padding: 0 15rpx;
			}
	
			.text1 {
				background: #ff0000;
			}
			
			.text3 {
				background: #999999;
			}
	
			.text2 {
				background: #fec322;
			}
		}
	}
	.win {
		position: fixed;
		width: 100%;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 20;
		background: rgba(0, 0, 0, 0.3);
	
		scroll-view {
			height: 100vh;
			background: #fff;
	
			view {
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1rpx solid #EFEFEF;
				position: relative;
			}
	
			view.active::after {
				position: absolute;
				content: '';
				width: 65rpx;
				height: 10rpx;
				background: #74a6fd;
				left: 50%;
				margin-left: -32rpx;
				top: 65%;
			}
		}
	}
	
</style>
